<template>
    <div class="login-template">
        <p class="title">BIDDING-SYSTEM</p>
        <p class="username">
            <span class="key">用户名：</span>
            <input type="text" name="username" id="username" v-model.lazy="username">
            <i class="fa fa-user"></i>
        </p>
        <p class="password">
            <span class="key">密&nbsp;&nbsp;&nbsp;码：</span>
            <input type="password" name="password" id="password" v-model.lazy="password"
                   @keyup.enter="status?login():register()">
            <i class="fa fa-lock"></i>
        </p>
        <button class="btn-login" type="submit" @click="login" v-if="status">登录</button>
        <button class="btn-register" type="submit" @click="register" v-if="!status">注册</button>
        <p class="register-info" v-if="status">还没有账号，<span class="register" @click="toggleRegister">去注册</span></p>
        <p class="login-info" v-if="!status">已有账号，<span class="login" @click="toggleLogin">去登录</span></p>
    </div>
</template>

<script>
    import UserService from '@/services/http/user.service'

    export default {
        data() {
            return {
                username: '',
                password: '',
                status: true,
            }
        },
        methods: {
            /**
             * 用户登录
             */
            login() {
                let user = {
                    username: this.username,
                    password: this.password,
                };
                if (!user.username || !user.password) {
                    this.$message({
                        showClose: true,
                        message: '请输入用户名和密码！',
                        type: 'error'
                    });
                    return;
                }
                UserService.login(user).then(response => {
                    if (response.data.success) {
                        /**
                         * 登录成功，跳转到首页
                         */
                        this.$router.push({name: 'Root', params: user});
                    } else {
                        this.$message({
                            showClose: true,
                            message: '用户名或密码错误！',
                            type: 'error'
                        });
                    }
                });
            },
            /**
             * 用户注册
             */
            register() {
                let user = {
                    username: this.username,
                    password: this.password,
                };
                if (!user.username || !user.password) {
                    this.$message({
                        showClose: true,
                        message: '请输入用户名和密码！',
                        type: 'error'
                    });
                    return;
                }
                UserService.register(user).then(response => {
                    if (response.data.success) {
                        /**
                         * 注册成功，跳转到登录页面
                         */
                        this.$router.push({name: 'Root', params: user});
                    } else {
                        this.$message({
                            showClose: true,
                            message: '用户名或密码格式错误！',
                            type: 'error'
                        });
                    }
                });
            },

            toggleRegister() {
                this.status = false;
                this.username = '';
                this.password = '';
            },

            toggleLogin() {
                this.status = true;
                this.username = '';
                this.password = '';
            }
        }
    }
</script>

<style lang="scss">
    @import "src/common/common.style";
    p {
        margin: 0;
    }
    .login-template {
        height: 330px;
        width: 400px;
        box-shadow: rgba(0, 0, 0, 0.35) 0px 0px 10px;
        background-color: #ffffff;
        border-radius: 10px;
        .title {
            height: 65px;
            line-height: 65px;
            font-size: 24px;
            color: rgb(26, 188, 156);
            border-bottom: 1px solid #d7d7d7;
            text-align: center;
            margin-bottom: 20px;
            font-weight: 700;
        }
        .username, .password {
            text-align: center;
            padding: 0 20px;
            height: 50px;
            line-height: 50px;
            position: relative;
            .key {
                color: #333333;
                display: inline-block;
                width: 70px;
            }
            input {
                width: 272px;
                height: 20px;
                border: 1px solid #cccccc;
                background-color: #ffffff !important;
                text-indent: 1rem;
            }
            i {
                position: absolute;
                top: 20px;
                right: 35px;
            }
            ::-webkit-input-placeholder {
                color: #999999;
            }
        }
        button.btn-login, button.btn-register {
            width: 85%;
            height: 52px;
            background-color: rgba(26, 188, 156, 1);
            color: #ffffff;
            border: 0;
            margin-top: 40px;
            border-radius: 10px;
            outline: none;
            cursor: pointer;
            display: inline-flex;
            justify-content: space-evenly;
            font-size: 18px;
            font-weight: 700;
        }
        .register-info, .login-info {
            margin-top: 10px;
            .register, .login {
                cursor: pointer;
                color: rgba(48, 135, 238, 0.87);
            }
        }
    }
</style>
